@import "~common/css/_variables.scss";

.banner {
  ul {
    position: relative;
    max-width: 100%;
    min-width: 760px;
    height: 200px;
    overflow: hidden;

    li {
      position: absolute;
      width: 540px;
      height: 200px;
      transition: all 0.5s ease;

      &.start {
        z-index: 2;
        opacity: 1;
        left: 0;
        transform: scale(0.8);
        transform-origin: 0% 100%;
      }

      &.middle {
        z-index: 3;
        left: 50%;
        opacity: 1;
        transform: translate(-50%, 0);
      }

      &.end {
        z-index: 2;
        opacity: 1;
        right: 0;
        transform: scale(0.8);
        transform-origin: 100% 100%;
      }

      &.other {
        z-index: 1;
        transform: scale(0.8);
        transform-origin: 100% 100%;
      }

      img {
        width: 100%;
        height: 100%;
        // user-select: none;
      }
    }
  }

  .point {
    text-align: center;
    padding: 14px 0;

    span {
      display: inline-block;
      width: 20px;
      height: 3px;
      margin: 0 6px;
      background-color: #c8c8c8;

      &.active {
        background-color: $color;
      }
    }
  }
}